useEffectSkipMount

The useEffect hook allows us to listen for changes to one or more variables, and run some sort of side effect when one of them changes.

The useEffect hook also runs during the mount process, no matter what the dependency array is. There are plenty of situations where this isn't ideal, and we don't want the effect to run after the first render.

In this challenge, you'll create a new custom hook, useEffectSkipMount. It should work just like React.useEffect, except it should only run when the dependencies change, not after the initial render.

Difficulty

This is a very hard problem. Unless you have extensive React experience, you probably won't be able to solve it.

Rules

You're not allowed to use any third-party libraries.
Feel free to google anything you'd like.

Playground

To help you solve this problem, you've been given an application with two pieces of state:

count, incremented by clicking a button.
name, a string bound to a controlled input.

The useEffectSkipMount custom hook is being used to log any changes to both of these state variables; there are two separate effects. Your mission is to implement this hook so that it behaves just like useEffect, but without logging the values during mount.

Acceptance Criteria:

useEffectSkipMount should behave just like React.useEffect, but without running during mount.
It should work correctly in Strict Mode.

ESLint warnings (warning)

In my own attempt, I wound up having to disable an ESLint warning. I couldn't come up with a solution otherwise.

You can do it by adding the following comment right above the troublesome line:

// eslint-disable-next-line react-hooks/exhaustive-deps

Code Playground

import React from 'react';

import useEffectSkipMount from './use-effect-skip-mount';

function App() {

const [count, setCount] = React.useState(1);

const [name, setName] = React.useState('');

useEffectSkipMount(() => {

console.log({ count });

}, [count]);

useEffectSkipMount(() => {

console.log({ name });

}, [name]);

return (

<input

value={name}

onChange={(event) => setName(event.target.value)}

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

</>

);

}

export default App;

With useEffect, we're not supposed to access a value inside the effect unless we add it to the dependency array.

The tricky thing about this challenge is that we have this callback parameter. We don't really want to include it in the dependency array, because the function is regenerated on every render:

useEffectSkipMount(
  // This function is the “callback” parameter.
  // It's regenerated on every render!
  () => {
    console.log({ count })
  },
  [count]
);

But if we don't include it, we're violating the ESLint rule.

Now, we had to disable that rule because of the "opaque" dependency array, but that doesn't give us carte blanche to ignore all of the rules! If we omit it from the dependency array, it means that we might be referring to an older version of the callback function. This can lead to some really gnarly bugs.

To solve this problem, we'll need to use an advanced technique. I'm not sure if it has a formal name, but I'll call it ref forwarding.

It looks like this:

function useEffectSkipMount(callback, dependencies) {
  const callbackRef = React.useRef();
  callbackRef.current = callback;

  React.useEffect(() => {
    if (/* is not the first render */) {
      return;
    }

    callbackRef.current();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, dependencies);
}

We create a new ref, and on every render, we mutate it to point to the newest version of callback. Then, inside the effect, we call callbackRef.current().

As a result, we don't need to add callback to the dependency array, but we also don't risk ever having a stale value of the callback function.

We don't cover this technique in the course because it won't be necessary for much longer. The upcoming useEffectEvent hook offers a way-less-mindbending solution for this problem. Unfortunately, there's no ETA on its public release.

My attempt

Phew! This is the final technical interview challenge, and it's a doozy. 😅

If you're looking for more practice, I'd suggest revisiting some of the exercises in the course! Most of them actually function quite well as interview challenges. You can get more practice thinking out loud, pretending that you're solving it for an audience.